<template>
  <div class='config-checktpl-container'>
    <div class="top">
      <p>APP模板定制</p>
    </div>
    <el-form :model="checkTplData"
             :rules="formRules"
             ref="checkTplForm">
      <div class="content">
        <h2 class="title">检查模板名称：{{requestParam.check_tpl_name}}</h2>

        <div class="app-icon main-content">
          <p class="sub-title">应用图标</p>
          <el-form-item prop="logo">
            <el-input v-model="checkTplData.logo"
                      disabled></el-input>
            <el-button @click="chooseIcon('logo',{})"
                       type="primary">选择应用图标</el-button>
          </el-form-item>
        </div>

        <div class="home-banner main-content">
          <p class="sub-title">首页banner</p>
          <el-upload :http-request="uploadBanner"
                     action=""
                     :on-remove="removeBanner"
                     :file-list="bannerList"
                     list-type="picture-card">
            <i class="el-icon-plus"></i>
          </el-upload>
        </div>

        <div class="version-pic main-content">
          <p class="sub-title">版本图片</p>
          <el-form-item prop="version_pic">
            <el-upload :http-request="uploadVersion"
                       action=""
                       :file-list="versionPicList"
                       :on-remove="removePic"
                       :on-exceed="uploadPicExceed"
                       list-type="picture-card"
                       :limit="1">
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </div>

        <div class="app-config main-content">
          <div class="app-config-detail">
            <p class="sub-title">APP标题名称</p>
            <el-form-item prop="application_name">
              <el-input v-model="checkTplData.application_name"
                        placeholder="请输入APP标题"></el-input>
            </el-form-item>
          </div>
          <div class="app-config-detail">
            <p class="sub-title">行菜单数量</p>
            <el-form-item prop="line_menu_num">
              <el-input-number v-model="checkTplData.line_menu_num"
                               :min="3"
                               :max="5"></el-input-number>
            </el-form-item>
          </div>
        </div>

        <el-table :data="checkTplData.tpl_config[0].module_config">
          <el-table-column label="检查项"
                           prop="check_item_name">
          </el-table-column>
          <el-table-column label="排序">
            <template slot-scope="scope">
              <el-input v-model="scope.row.sort"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="是否显示"
                           prop="show_status">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.show_status"
                         :active-value="1"
                         :inactive-value="0"></el-switch>
            </template>
          </el-table-column>
          <el-table-column label="菜单图标"
                           prop="menu_icon">

          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="text"
                         @click="chooseIcon('menu-icon',scope.row)">选择菜单图标</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="btn-groups">
          <el-button @click="configTpl"
                     type="primary">确定</el-button>
          <el-button @click="back">取消</el-button>
        </div>
      </div>
    </el-form>

    <ChooseIconDialog :dialogVisible.sync="chooseIconDialogVisible"
                      @callback="chooseIconCb"></ChooseIconDialog>
  </div>
</template>
<script>
import { UploadFileApi } from '@/services/UserPermission'
import { CommonCheckApi } from '@/services/SystemSetting'
import ChooseIconDialog from './components/ChooseIconDialog'
export default {
  data () {
    return {
      // 验证规则
      formRules: {
        logo: [
          { required: true, message: '请选择应用图标', trigger: 'change' }
        ],
        version_pic: [
          { required: true, message: '请上传版本图片', trigger: 'change' }
        ],
        application_name: [
          { required: true, message: '请输入APP名称', trigger: 'change' }
        ],
        line_menu_num: [
          { required: true, message: '请输入行菜单数量', trigger: 'change' }
        ]
      },
      // 检查模板详情数据
      checkTplData: {
        tpl_name: '',
        tpl_type_value: '',
        tpl_type_name: '',
        tpl_config: [{ module_config: [] }],
        logo: '',
        home_pic: [],
        version_pic: '',
        version: '',
        application_name: '',
        line_menu_num: 1,
      },
      // 上传的banner图片列表
      bannerList: [],
      // 版本图片列表
      versionPicList: [],
      // 请求检查项列表参数
      requestParam: {
        check_tpl_id: '',
        check_tpl_name: '',
        check_module_id: '',
        is_page: 1,
        page: 1,
        page_size: 10
      },
      // 检查项列表
      checkItemList: {
        list: []
      },
      // 选择图标弹框是否可见
      chooseIconDialogVisible: false,
      // 选择应用图标或菜单图标
      chooseIconType: '',
      // 选择菜单图标的row
      chooseMenuIconRow: {}
    }
  },
  components: {
    ChooseIconDialog
  },
  methods: {
    back () {
      this.$router.go(-1)
    },
    // 选择图标
    chooseIcon (type, row) {
      this.chooseIconType = type
      this.chooseMenuIconRow = row
      this.chooseIconDialogVisible = true

    },
    // 选择图标回调
    chooseIconCb (data) {
      if (this.chooseIconType === 'logo') {
        this.checkTplData.logo = data.icon
      } else {
        this.chooseMenuIconRow.menu_icon = data.icon
      }

    },
    // 上传banner
    uploadBanner (params) {
      let formData = new FormData()
      formData.append('module', 'app-banner')
      formData.append('pic_file_apk', params.file)
      UploadFileApi.uploadFile({
        data: formData
      }).then(res => {
        // console.log(res, 'upload business img')
        if (res.data) {
          this.bannerList.push({
            name: params.file.name,
            url: res.data.file_path
          })
        }
        console.log(this.checkTplData.home_pic, params, this.bannerList, 'upload banner')
      })
    },
    // 移除banner
    removeBanner (file, filelist) {
      this.bannerList = filelist
      console.log(file, filelist, this.bannerList, 'remove banner')
    },
    // 上传版本图
    uploadVersion (params) {
      let formData = new FormData()
      formData.append('module', 'version-pic')
      formData.append('pic_file_apk', params.file)
      UploadFileApi.uploadFile({
        data: formData
      }).then(res => {
        if (res.data) {
          this.versionPicList.push({
            name: params.file.name,
            url: res.data.file_path
          })
          this.checkTplData.version_pic = res.data.file_path
        }
      })
    },
    // 移除版本图片
    removePic (file, filelist) {
      this.versionPicList = filelist
      this.checkTplData.version_pic = ''
    },
    //版本图上传限制提示 
    uploadPicExceed () {
      this.$message.warning('版本图最多上传一张')
    },
    // 获取配置详情
    getTplConfigDetail () {
      CommonCheckApi.checkTplConfigDetail({
        params: {
          check_tpl_id: this.requestParam.check_tpl_id
        }
      }).then(res => {
        if (res.code === 0) {
          this.bannerList = []
          this.versionPicList = []
          this.checkTplData = res.data
          this.checkTplData.home_pic.map((item) => {
            this.bannerList.push({
              url: item,
              name: ''
            })
          })
          if (this.checkTplData.version_pic) {
            this.versionPicList.push({
              url: this.checkTplData.version_pic,
              name: ''
            })
          }

        }
      })
    },
    // 修改模板配置
    configTpl () {

      if (this.bannerList.length === 0) {
        this.$message.warning('请上传首页banner图片')
      } else {
        this.$refs.checkTplForm.validate((valid) => {
          if (valid) {
            this.checkTplData.home_pic = []
            this.bannerList.map((item) => {
              this.checkTplData.home_pic.push(item.url)
            })
            // 判断是否设置了菜单图标
            let flag = true
            this.checkTplData.tpl_config[0].module_config.map((item) => {
              if (item.menu_icon === '') flag = false
            })
            if (flag) {
              CommonCheckApi.editCheckTplConfig({
                data: this.checkTplData
              }).then(res => {
                if (res.code === 0) {
                  this.$message.success('修改成功')
                  // this.getTplConfigDetail()
                  this.$router.push({
                    path: '/checkTemplateManage'
                  })
                }
              })
            } else {
              this.$message.warning('请选择菜单图标')
            }

            // console.log(this.checkTplData, 'config tpl')
          }
        })

      }
    }
  },
  created () {
    this.requestParam.check_tpl_id = this.$route.query.id
    this.requestParam.check_tpl_name = this.$route.query.name
    this.getTplConfigDetail()
  },
  mounted () {
  }
}
</script>
<style scoped lang='scss'>
.config-checktpl-container {
  .top {
    width: 100%;
    height: 54px;
    line-height: 54px;
    padding-left: 20px;
    font-size: 16px;
    color: #333;
    font-weight: 600;
    border-bottom: 1px solid #e6e6e6;
  }
  .content {
    padding: 20px;
    .title {
      font-size: 20px;
      color: rgba(0, 0, 0, 0.85);
      font-weight: bold;
      margin-bottom: 20px;
    }
    .sub-title {
      font-size: 14px;
      color: rgba(0, 0, 0, 0.85);
      font-weight: 600;
      margin-bottom: 20px;
    }
    .main-content {
      margin-bottom: 20px;
      padding-bottom: 20px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }
    .app-icon {
      .el-input {
        width: 400px;
        margin-right: 15px;
      }
    }
    .app-config {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .sub-title {
        width: 90px;
        margin-right: 20px;
        margin-bottom: 0;
      }
      .el-input {
        width: 400px;
        margin-right: 40px;
      }
      .app-config-detail {
        display: flex;
        align-items: center;
        .el-form-item {
          margin-bottom: 0;
        }
      }
    }
    .btn-groups {
      text-align: center;
      margin-top: 20px;
    }
  }
}
</style>